@rendermode RenderMode.InteractiveServer

<section class="py-8 flex">
    <div class="mt-8 mx-auto">
        <h2 class="mt-2 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl text-center">
            Getting Started
        </h2>
        <div>
            <div class="flex flex-col">

                <h4 class="py-6 text-center text-xl">Create New Project</h4>
                <input type="text" @bind-value="project" @bind-value:event="oninput" autocomplete="off" spellcheck="false" placeholder="ProjectName"
                        class="mb-8 sm:text-lg rounded-md shadow focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 dark:bg-gray-800" />

                <section class="w-full flex justify-center text-center">
                    <div class="mb-2">
                        <div class="flex justify-center text-center">
                            <a class="archive-url hover:no-underline" href=@zipUrl("NetCoreTemplates/blazor")>
                                <div class="bg-white dark:bg-gray-800 px-4 py-4 mr-4 mb-4 rounded-lg shadow-lg text-center items-center justify-center hover:shadow-2xl dark:border-2 dark:border-pink-600 dark:hover:border-blue-600 dark:border-2 dark:border-pink-600 dark:hover:border-blue-600" style="min-width: 150px;">
                                    <div class="text-center font-extrabold flex items-center justify-center mb-2">
                                        <div class="text-4xl text-blue-400 my-3">
                                            <svg style="color:rgb(91, 33, 182)" class="w-14 h-14" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M23.834 8.101a13.912 13.912 0 0 1-13.643 11.72a10.105 10.105 0 0 1-1.994-.12a6.111 6.111 0 0 1-5.082-5.761a5.934 5.934 0 0 1 11.867-.084c.025.983-.401 1.846-1.277 1.871c-.936 0-1.374-.668-1.374-1.567v-2.5a1.531 1.531 0 0 0-1.52-1.533H8.715a3.648 3.648 0 1 0 2.695 6.08l.073-.11l.074.121a2.58 2.58 0 0 0 2.2 1.048a2.909 2.909 0 0 0 2.695-3.04a7.912 7.912 0 0 0-.217-1.933a7.404 7.404 0 0 0-14.64 1.603a7.497 7.497 0 0 0 7.308 7.405s.549.05 1.167.035a15.803 15.803 0 0 0 8.475-2.528c.036-.025.072.025.048.061a12.44 12.44 0 0 1-9.69 3.963a8.744 8.744 0 0 1-8.9-8.972a9.049 9.049 0 0 1 3.635-7.247a8.863 8.863 0 0 1 5.229-1.726h2.813a7.915 7.915 0 0 0 5.839-2.578a.11.11 0 0 1 .059-.034a.112.112 0 0 1 .12.053a.113.113 0 0 1 .015.067a7.934 7.934 0 0 1-1.227 3.549a.107.107 0 0 0-.014.06a.11.11 0 0 0 .073.095a.109.109 0 0 0 .062.004a8.505 8.505 0 0 0 5.913-4.876a.155.155 0 0 1 .055-.053a.15.15 0 0 1 .147 0a.153.153 0 0 1 .054.053A10.779 10.779 0 0 1 23.834 8.1zM8.895 11.628a2.188 2.188 0 1 0 2.188 2.188v-2.042a.158.158 0 0 0-.15-.15z" fill="currentColor" /></svg>
                                        </div>
                                    </div>
                                    <div class="text-xl font-medium text-gray-700 dark:text-gray-300">Blazor</div>
                                    <div class="flex justify-center h-8"></div>
                                    <span class="archive-name px-4 pb-2 text-blue-600 dark:text-indigo-400">@projectZip</span>
                                    <div class="count mt-1 text-gray-400 text-sm"></div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="mb-2">
                        <div class="flex justify-center text-center">
                            <a class="archive-url hover:no-underline" href=@zipUrl("NetCoreTemplates/blazor-vue")>
                                <div class="bg-white dark:bg-gray-800 px-4 py-4 mr-4 mb-4 rounded-lg shadow-lg text-center items-center justify-center hover:shadow-2xl dark:border-2 dark:border-pink-600 dark:hover:border-blue-600 dark:border-2 dark:border-pink-600 dark:hover:border-blue-600" style="min-width: 150px;">
                                    <div class="text-center font-extrabold flex items-center justify-center mb-2">
                                        <div class="text-4xl text-blue-400 my-3">
                                            <svg style="color:rgb(91, 33, 182)" class="w-14 h-14" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M23.834 8.101a13.912 13.912 0 0 1-13.643 11.72a10.105 10.105 0 0 1-1.994-.12a6.111 6.111 0 0 1-5.082-5.761a5.934 5.934 0 0 1 11.867-.084c.025.983-.401 1.846-1.277 1.871c-.936 0-1.374-.668-1.374-1.567v-2.5a1.531 1.531 0 0 0-1.52-1.533H8.715a3.648 3.648 0 1 0 2.695 6.08l.073-.11l.074.121a2.58 2.58 0 0 0 2.2 1.048a2.909 2.909 0 0 0 2.695-3.04a7.912 7.912 0 0 0-.217-1.933a7.404 7.404 0 0 0-14.64 1.603a7.497 7.497 0 0 0 7.308 7.405s.549.05 1.167.035a15.803 15.803 0 0 0 8.475-2.528c.036-.025.072.025.048.061a12.44 12.44 0 0 1-9.69 3.963a8.744 8.744 0 0 1-8.9-8.972a9.049 9.049 0 0 1 3.635-7.247a8.863 8.863 0 0 1 5.229-1.726h2.813a7.915 7.915 0 0 0 5.839-2.578a.11.11 0 0 1 .059-.034a.112.112 0 0 1 .12.053a.113.113 0 0 1 .015.067a7.934 7.934 0 0 1-1.227 3.549a.107.107 0 0 0-.014.06a.11.11 0 0 0 .073.095a.109.109 0 0 0 .062.004a8.505 8.505 0 0 0 5.913-4.876a.155.155 0 0 1 .055-.053a.15.15 0 0 1 .147 0a.153.153 0 0 1 .054.053A10.779 10.779 0 0 1 23.834 8.1zM8.895 11.628a2.188 2.188 0 1 0 2.188 2.188v-2.042a.158.158 0 0 0-.15-.15z" fill="currentColor" /></svg>
                                        </div>
                                    </div>
                                    <div class="text-xl font-medium text-gray-700 dark:text-gray-300">Blazor Vue</div>
                                    <div class="flex justify-center h-8"></div>
                                    <span class="archive-name px-4 pb-2 text-blue-600 dark:text-indigo-400">@projectZip</span>
                                    <div class="count mt-1 text-gray-400 text-sm"></div>
                                </div>
                            </a>
                        </div>
                    </div>
                </section>

                <div class="py-6 text-center text-xl">
                    Open with <a class="underline hover:text-green-600" href="https://visualstudio.microsoft.com/vs/">Visual Studio 2022</a> 
                    or <a class="underline hover:text-green-600" href="https://www.jetbrains.com/rider/">JetBrains Rider</a>
                </div>

                <h4 class="py-6 text-center text-xl">
                    After install run 
                    <TextLink href="https://docs.servicestack.net/ormlite/db-migrations">DB Migrations</TextLink>
                     to create App DB
                </h4>
                <ShellCommand>npm run migrate</ShellCommand>

                <h4 class="py-6 text-center text-xl">
                    Run Tailwind
                </h4>
                <ShellCommand>npm run ui:dev</ShellCommand>

                <h4 class="py-6 text-center text-xl">
                    Run Blazor App 
                    <span class="text-gray-400">in /MyApp</span> 
                </h4>
                <ShellCommand>dotnet watch</ShellCommand>
            </div>
        </div>
    </div>
</section>

@code {
    string project { get; set; } = "";

    string projectName => string.IsNullOrEmpty(project) ? "MyApp" : project; 

    string projectZip => projectName + ".zip";

    string zipUrl(string template) =>
         $"https://account.servicestack.net/archive/{template}?Name={projectName}";
}
